---
title: Using Preact
description: Easily use Panda with Preact with our dedicated integration.
---

This guide shows you how to set up Panda CSS in a Preact project using PostCSS.

## Start a new project

<Steps>

### Create Vite project

To get started, we will need to create a new Preact project using `typescript` template.

<Tabs items={['npm', 'yarn']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    npx preact-cli create typescript test-app
    cd test-app
    ```
  </Tab>
  <Tab>
    ```bash
    npx preact-cli create typescript test-app --yarn
    cd test-app
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Install Panda

Install panda and create your `panda.config.ts` file.

<Tabs items={['npm', 'yarn']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    npm install -D @pandacss/dev
    npx panda init --postcss
    ```
  </Tab>
  <Tab>
    ```bash
    yarn add -D @pandacss/dev
    yarn panda init --postcss
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Update package.json scripts

Open your `package.json` file and update the `scripts` section as follows:

```diff {3} filename="package.json"
{
  "scripts": {
+    "prepare": "panda codegen",
    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider preact build",
    "serve": "sirv build --cors --single",
    "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider preact watch",
    "lint": "eslint src",
    "test": "jest"
  }
}
```

- `"prepare"` - script that will run Panda CSS CLI codegen before each build. Read more about
  [codegen](/docs/references/cli#panda-codegen) in the CLI section.

> This step ensures that the panda output directory is regenerated after each dependency installation. So you can add
> the output directory to your `.gitignore` file and not worry about it.

### Configure the content

Make sure that all of the paths of your Preact components are included in the `include` section of the `panda.config.ts`
file.

```js {6} filename="panda.config.ts"
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  preflight: true,
  // Where to look for your css declarations
  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
  exclude: [],
  outdir: 'styled-system'
})
```

### Configure the entry CSS with layers

Add this code to an `src/style/index.css` file imported in the root component of your project.

```css filename="src/style/index.css"
@layer reset, base, tokens, recipes, utilities;
```

## Start your build process

Run the following command to start your development server.

<Tabs items={['npm', 'yarn']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    npm run dev
    ```
  </Tab>
  <Tab>
    ```bash
    yarn dev
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Start using Panda

Now you can start using Panda CSS in your project. Here is the snippet of code that you can use in your
`src/routes/home/index.tsx` file.

```tsx filename="src/routes/home/index.tsx"
import { h } from 'preact'
import { css } from '../../../styled-system/css'

const Home = () => {
  return <div class={css({ fontSize: '2xl', fontWeight: 'bold', pt: '56px' })}>Hello 🐼!</div>
}

export default Home
```

</Steps>

## Troubleshooting

If you're not getting import autocomplete in your IDE, you may need to include the `styled-system` directory in your
`tsconfig.json` file:

```json filename="tsconfig.json"
{
  // ...
  "include": ["src", "styled-system"]
}
```
